<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
    <div class="layui-fluid">
    
        <div class="nav" style="margin:10px 0;">
            <span class="layui-breadcrumb">
                <a href="/home">首页</a>
                <a href="/cateList">分类列表</a>
                <a><cite>修改分类</cite></a>
              </span>
        </div>
        <div class="body"  style="margin:10px 0;max-width:800px">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                  <label class="layui-form-label">分类名字</label>
                  <div class="layui-input-block">
                    <input type="hidden" name="_id" value="<%= cate._id %>">
                    <input type="text" value="<%= cate.cateName %>" name="cateName" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                  </div>
                </div>
        
                <div class="layui-form-item">
                  <label class="layui-form-label">父级分类</label>
                  <div class="layui-input-block">
                    <select name="pid" lay-verify="required">
                      
                      <option <%= cate.pid==0 && 'selected'  %> value="0">顶层分类</option>
                      <% for(var i=0;i<cates.length;i++){ %>
                      <option <%= cate.pid == cates[i]._id && 'selected' %>  value="<%= cates[i]._id %>"><%= cates[i].cateName %></option>
                      <%}%>
                     
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">封面图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <img id="img" src="<%= cate.cateIcon %>" alt="">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">分类描述</label>
                  <div class="layui-input-block">
                    <textarea name="cateDesc" placeholder="请输入内容" class="layui-textarea"><%= cate.cateDesc %></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
                </div>
              </form>
        </div>
    </div>
    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use(['element','form','jquery','layer','upload'],function(){
            var element=layui.element;
            var form = layui.form;
            var $ = layui.jquery;
            var layer = layui.layer;
            var upload = layui.upload;
            // 上传分类封面图片
            var path = "<%= cate.cateIcon %>";
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '/upload' //上传接口
                ,field:"file"
                ,done: function(res){
                //上传完毕回调
                    console.log(res)
                    $("#img").attr('src',res.path);
                    path = res.path;
                }
                ,error: function(){
                //请求异常回调
                }
            });
            //监听提交
            form.on('submit(formDemo)', function(data){
                // 监听表单提交事件
               
                data.field.cateIcon = path;
                console.log(data.field);
                delete data.field.file;
               $.ajax({
                    url:'/cateEdit',
                    type: 'POST',
                    data:data.field,
                    success:function(res){
                        console.log(res)
                        if(res.code === 0){
                            // 增加成功
                            layer.msg(res.msg,{
                                icon:1
                            },function(){
                                // 刷新页面
                                location.href="/cateList"
                            })
                        }
                    }
                }) 
                return false;
            });
        })
        /* 
        逻辑运算符  && 和 ||
        短路：当前面一个表达式已经得出最终结论时，后面一个表达式不执行，
        否则后面表达式执行

        表达式1 && 表达式2

        表达式1 || 表达式2
        */
    </script>
</body>
</html>